<template>
  <el-dialog
    title="标签集"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      class="query-more-form"
      size="mini"
      label-width="85px"
      :model="form"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-select
            class="w-100"
            v-model="form.caseLable"
            placeholder="请选择案件标签"
            multiple
            @visible-change="changeCaseLable"
            @remove-tag="removeCaseLable"
          >
            <el-option
              v-for="item in labelListArr"
              :key="item.id"
              :value="item.name"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn">
      <el-button @click="cancelBtn">取消</el-button>
      <el-button type="primary" @click="sureBtn">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getLabelList } from "@/api/case.js";
export default {
  data() {
    return {
      labelListArr: [],
      form: {},
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog");
      // 关闭弹窗清楚数据
    },

    // 查询所有的标签集
    getAllLabelList() {
      getLabelList()
        .then((result) => {
          let { code, rows } = result;
          if (code == 200) {
            this.labelListArr = rows;
          }
        })
        .catch();
    },

    // 取消
    cancelBtn() {
      this.$emit("closeDialog");
      // 关闭弹窗清楚数据
      // this.navMsgArr = [];
      // this.ulDataArr = [];
    },

    // 选择标签集
    changeCaseLable() {
      this.form.labels = this.form.caseLable.toString();
    },

    // 移除标签集
    removeCaseLable() {
      this.form.labels = this.form.labels.toString();
    },

    // 确定
    sureBtn() {
      if (this.form.caseLable.length == 0) {
        this.$message.warning("请选择标签集");
      } else {
        this.$emit("closeDialog");
        this.$emit("caseLableMsg", this.form.labels);
      }
    },
  },

  created() {
    this.getAllLabelList();
  },
};
</script>
<style scoped lang="scss">
.btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>